<!DOCTYPE html>
<html>

<head>
    <title>大学生英语阅读自主学习平台</title>
    <link rel="stylesheet" href="PUBLIC/css/mdl/material.css">
	<script defer src="PUBLIC/css/mdl/material.min.js"></script>
    <link rel="stylesheet" type="text/css" href="PUBLIC/css/styles.css">
	<script type="text/javascript" src="PUBLIC/jquery/jquery.js"></script>
    <style type="text/css">
        .portfolio-header {
            position: relative;
            background-image: url('PUBLIC/img/transparent.jpg');
        }

        .portfolio-logo {
            background: url('PUBLIC/img/logo.png') 50% no-repeat;
            background-size: cover;
            height: 150px;
            width: 150px;
            margin: auto auto 10px;
        }

        .demo-card-square.mdl-card {
            width: 320px;
            height: 240px;
            margin: 0 auto;
        }
        .demo-card-square>.mdl-card__title {
            color: #fff;
        }
    </style>
</head>

<body>
    <div class="mdl-layout mdl-js-layout mdl-layout--fixed-header">
        <!-- 头部分 -->
        <header class="mdl-layout__header mdl-layout__header--waterfall portfolio-header">
            <div class="mdl-layout__header-row portfolio-logo-row">
                <span class="mdl-layout__title">
                    <div class="portfolio-logo"></div>
                    <span class="mdl-layout__title">English learning platform</span>
                </span>
            </div>
            <div class="mdl-layout__header-row portfolio-navigation-row mdl-layout--large-screen-only">
                <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
                    <a id='getA' class="mdl-navigation__link is-active" href="{:url('Index/index')}?book=1">BOOK 1</a>
                    <a id='getB' class="mdl-navigation__link" href="{:url('Index/index')}?book=2">BOOK 2</a>
                    <a id='getC' class="mdl-navigation__link" href="{:url('Index/index')}?book=3">BOOK 3</a>
                    <a id='getD' class="mdl-navigation__link" href="{:url('Index/index')}?book=4">BOOK 4</a>
                </nav>
            </div>
        </header>
        <!-- <div class="mdl-layout__drawer mdl-layout--small-screen-only">
            <nav class="mdl-navigation mdl-typography--body-1-force-preferred-font">
                <a class="mdl-navigation__link is-active" href="{:url('Index/index')}?book=1">BOOK 1</a>
                <a class="mdl-navigation__link" href="{:url('Index/index')}?book=2">BOOK 2</a>
                <a class="mdl-navigation__link" href="{:url('Index/index')}?book=3">BOOK 3</a>
                <a class="mdl-navigation__link" href="{:url('Index/index')}?book=4">BOOK 4</a>
            </nav>
        </div> -->
        <main class="mdl-layout__content">
            <p id='get' style="display:none">{$book}</p>
            <div class="mdl-grid">
                    {volist name="info" id="vo"}
                <div class="mdl-cell mdl-cell--4-col">
                    <div class="demo-card-square mdl-card mdl-shadow--2dp" >
                        <div class="mdl-card__title mdl-card--expand" style="background: url('{$vo['url']}') center / cover">
                            <h2 class="mdl-card__title-text">{$vo["unit"]}</h2>
                        </div>
                        <div class="mdl-card__supporting-text">{$vo["content"]}</div>
                        <div class="mdl-card__actions mdl-card--border">
                            <a class="mdl-button mdl-button--colored mdl-js-button mdl-js-ripple-effect" href="{:url('StudyText/index')}">{$vo["start"]}
                            </a>
                        </div>
                    </div>
                </div>
                {/volist}
        </main>
        </div>
        <script>
        function toChange(array,a){
            for(var i=0;i<array.length;i++){
                if(i == a){
                    array[i].className = 'mdl-navigation__link is-active'
                }else{
                    array[i].className = 'mdl-navigation__link'
                }   
                
            }
        }
        function isActive(){
            var book = document.getElementById('get')
            var get =[  document.getElementById('getA'), 
                        document.getElementById('getB'),
                        document.getElementById('getC'),
                        document.getElementById('getD')
                        ]
            switch(book.innerText){
                case '1':toChange(get,0)
                    break
                case '2':toChange(get,1)
                    break
                case '3':toChange(get,2)
                    break
                case '4':toChange(get,3)
                    break
            }
            
        }
        isActive()
        </script>
</body>

</html>